<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #div p[title]{/*选择具有title属性的p元素。*/
            color: blue;
            }
            #div option[selected="selected"]{
            /*选择具有selected属性且属性值等于selected的 option元素。*/
            color: white;
            }
            #div option[selected ="sel"]{
            /*选择具有selected属性且属性值为以sel开头的字符串的 option元素。*/
            background-color: pink;
            }
            #div option[disabled$="led"]{
            /*选择具有 disabled属性且属性值为以led结尾的字符串的 option元素。*/
            background-color: greenyellow;
            }
            #div option[disabled*="ed"]{
            /*选择具有disabled属性且属性值包含ed结尾的字符串的option元素。*/
            font-weight: bold;
            }
        </style>
    </head>
<body>
    <div id="div">
        <p title="study">前端学习</p>
        <select name="kuangjia">
            <option>框架</option>
            <option selected="selected">Bootstrap</option>
            <option disabled="disabled">JQuery</option>
            <option>AngularJS</option>
        </select>
    </div>
</body>
<html>
